<template>
  <div class="product">
      <div class="product-img">
          <img class="auto-img" :src="pro.smallImg">
      </div>
      <div class="product-zh one-text">{{pro.name}}</div>
      <div class="product-en one-text">{{pro.enname}}</div>
      <div class="product-price">&yen;{{pro.price}}</div>
  </div>
</template>

<script>

export default {
    name:'Products',
    props:{
        pro:{
            type:Object,
            //默认值,当属性值为数组或者对象时,默认值需要使用函数返回
            default() {
                return {};
            }
        }
    }
}
</script>

<style lang="less" scoped>
@import url('../assets/base.less');
    .product-img {
       background-color: #eee;
       border-radius: 10px;
       overflow: hidden;
    }
    .product-zh {
        font-size:14px;
        margin-top: 10px;
    }
    .product-en {
        color:#666;
    }
    .product-price {
        font-weight:bold;
        color:@priceColor;
    }
</style>